<div class="max-w-2xl mx-auto py-8 h-full flex flex-col justify-start">
  <div class="sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-white text-lg font-medium text-gray-900 z-20">
    <div class="shrink-0">{{'PAC.Xpert.XpertManagers' | translate: {Default: 'Xpert Managers'} }}</div>
    <div class="grow flex justify-end">
    </div>
  </div>

  <div class="px-4 sm:px-8 pt-2 relative">
    <div class="flex flex-col">
      <div class="flex items-center mb-4 p-3 bg-gray-50 rounded-2xl">
        <div class="grow mx-2">{{ xpert()?.title || xpert()?.name }}</div>

        <div
          class="shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200 text-[13px] font-medium text-primary-600 bg-white shadow-xs rounded-lg cursor-pointer"
          (click)="openAddUser()"
        >
          <svg
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="currentColor"
            class="w-4 h-4 mr-2"
          >
            <path
              d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"
            ></path></svg
          >{{ 'PAC.ACTIONS.Add' | translate: {Default: 'Add'} }}
        </div>
      </div>
    </div>
    <div class="overflow-visible lg:overflow-visible">
      <div class="flex items-center py-[7px] border-b border-gray-200 min-w-[480px]">
        <div class="grow px-3 text-sm font-medium text-gray-500">{{ 'PAC.KEY_WORDS.User' | translate: {Default: 'User'} }}</div>
        <div class="shrink-0 w-24 px-3 text-sm font-medium text-gray-500">{{ 'PAC.KEY_WORDS.Actions' | translate: {Default: 'Actions'} }}</div>
      </div>
      <div class="min-w-[480px] relative">
        @for (item of members(); track item) {
          <div class="flex items-center border-b p-2 border-gray-100 hover:bg-hover-bg">
            <pac-user-profile-inline class="grow" [user]="item.user" [isMe]="me().id === item.user.id" />
          
            <div class="shrink-0 w-24 px-3 flex items-center">
              @if (item.type === 'workspace') {
                <div class="p-2 text-xl text-text-secondary" [matTooltip]="'PAC.Xpert.WorkspaceMember' | translate: {Default: 'Workspace Member'}"
                  matTooltipPosition="after"
                >
                  <i class="ri-user-settings-line"></i>
                </div>
              }
              @else {
                <button type="button" class="btn btn-secondary btn-danger pressable px-2 py-1 text-sm"
                  (click)="removeManager(item.user)">{{'PAC.ACTIONS.Remove' | translate: {Default: 'Remove'} }}</button>
              }
            </div>
          </div>
        }
      </div>
    </div>

    @if (loading()) {
      <ngm-spin class="absolute left-0 top-0 w-full h-full" />
    }
  </div>
  
</div>